<!-- 学生分布 -->
<template>
  <div>
    <v-echarts :options="options" autoresize :class="$style.echartStyle"/>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/legendScroll'
  export default {
    components: { 'v-echarts': ECharts },
    data () {
      return {}
    },

    computed: {
      options () {
        let color = ['#00C2FC', '#0069FE', '#450ADD', '#8E30FF', '#F35C6E', '#F5A135', '#DBEC00', '#4FFCAD']
        return {
          color: color,
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
            textStyle: {
              color: '#fff'
            },
            padding: [
              35,  // 上
              10, // 右
              5,  // 下
              30, // 左
            ],
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['60%', '50%'],
              data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      }
    },

    methods: {},
    created () {},
    beforeDestroy () {
      clearInterval(this.timer0)
    }
  }

</script>
<style lang='scss' module>
  .echartStyle{
    width: 100%;
    height: 220px;
    margin: 0 auto;
  }
</style>
